<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns="http://www.w3.org/1999/xhtml">
	<head th:replace="_fragments :: head(~{::title})">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta charset="utf-8" />
		<title>博客详情</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="../static/css/typo.css" />
		<link rel="stylesheet"  href="../static/css/me.css"/>
		<link rel="stylesheet" href="../static/css/animate.css" />
		<link rel="stylesheet" href="../static/lib/prism/prism.css" />
		<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css"/>
	</head>
    <!--导航-->

	<body>
		<nav class="ui inverted attached segment m-padded-tb-mini" th:replace="_fragments :: menu(1)" >
			<div class="ui container" >
				<div class="ui inverted secondary stackable menu">
				<h2 class="ui teal header item">Blog</h2>
				<a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
				<a href="#" class="m-item item  m-mobile-hide"><i class="mini idea icon"></i>分类</a>
				<a href="#" class="m-item item  m-mobile-hide"><i class="mini tags icon"></i>标签</a>
				<a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
				<a href="#" class="m-item item  m-mobile-hide"><i class="mini info icon"></i>关于我</a>
				<div class="right m-item item m-mobile-hide">
					<div class="ui icon inverted transparent input">
						<input type="text" placeholder="点此搜索"/>
						<i class="search link icon"></i>
					</div>
				</div>
			</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		<!--中间内容-->
		<div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
			<div class="ui container">
				<div class="ui top attached segment">
					<div class="ui two column grid">
						<div class="column">
						<div class="ui horizontal link list">
							<div class="item">
								<img src="https://picsum.photos/id/1/100/100?image=129" th:src="@{${blog.user.avatar}}"  alt="" class="ui avatar image"/>
								<div class="content"><a href="#" th:text="${blog.user.nickname}" class="header">victory_林</a></div>
							</div>
							<div class="item">
							    <i class="calendar alternate icon"></i><span th:text="${#dates.format(blog.updatetime,'yyyy-MM-dd')}"></span>
							</div>
							<div class="item">
							    <i class="eye icon"></i><span th:text="${blog.view}">2342</span>
							</div>
						</div>
						</div>
						<div class="right aligned column m-margin-bottom-small">
							<a href="#" th:href="@{/save/{id}(id=${ids})}" th:each="ids : ${id}" class="m-black"><i class="big plus square outline icon"></i>收藏</a>
							[<span class="m-margin-bottom-small" th:text="${save_account}">3</span>]
						</div>
					</div>
				</div>
				<div class="ui  container">
					<div class="ui warning message" th:if="${approve != null}">
						<i class="close icon"></i>
						<div class="header">提示:</div>
						<p th:text="${approve}"></p>
					</div>
				</div>
				<div class="ui attached segment">
					<!--图片区域-->
					<img th:src="@{${blog.firstpicture}}" src="https://picsum.photos/id/1/800/350?image=186" class="ui fluid rounded image">
				</div>
				<div class="ui  attached padded segment">
					<!--内容-->
					<div class="ui right aligned basic segment">
						<div class="ui orange basic label" th:text="${blog.flags}">原创</div>
					</div>
					<h2 class="ui center aligned header" th:text="${blog.title}">关于刻意练习的清单</h2>
					<br />
					<div id="content" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"
						 th:utext="${blog.content}">
					</div>
		<!--标签-->
		<div class="m-paddes-lr-responsive">
			<div class="ui basic teal left pointing label" th:each=" tag : ${blog.tags}" th:text="${tag.name} ==null ? '': ${tag.name}">
				方法论
			</div>
		</div>
		<!--赞赏-->
					<div class="eleven wide column">
					<div th:if="${blog.appreciation}">
						<div class="ui center aligned basic segment">
							<button id="payButton" class="ui orange basic circular button">赞赏</button>
						</div>
						<div class="ui payQR flowing popup transition hidden">
							<div class="ui orange basic label">
								<div class="ui images" style="font-size: inherit !important;">
									<div class="image">
										<img src="../static/img/zhi_pay.png" th:src="@{/img/zhi_pay.png}" alt="" class="ui rounded bordered image" style="width: 120px;">
										<div>支付宝支付</div>
									</div>
									<div class="image">
										<img src="../static/img/wechat_pay.png" alt=""th:src="@{/img/wechat_pay.png}" class="ui rounded bordered image" style="width: 120px;">
										<div>微信支付</div>
									</div>
								</div>
							</div>
						</div>
						<div>

						</div>
					</div>
					</div>
					<div class="five wide column">
						<div >
							<a th:if="${lastBlog} != null" class="m-black" th:href="@{/blog/{id}(id=${lastBlog.id})}">上一篇:<span th:if="${lastBlog} != null" th:text="${lastBlog.title}">测试上一篇</span></a>
						<div><br>
						<div><a th:if="${nextBlog} != null"class="m-black" th:href="@{/blog/{id}(id=${nextBlog.id})}">下一篇:<span th:if="${nextBlog} != null" th:text="${nextBlog.title}">测试下一篇</span></a><div>
					</div>

					<div class="ui center aligned basic segment">
						<div th:fragment="likeList">
						<span>
							<a class="m-black" th:href="@{/aprrove/{id}(id=${ids})}" th:each="ids : ${id}"><i class="big thumbs up outline icon"></i>顶一下</a>
						</span>
						[<span th:text="${like_account}">2</span>]
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
						<span>
							<a class="m-black" th:href="@{/disaprrove/{id}(id=${ids})}" th:each="ids : ${id}" href="#"><i class="big thumbs down outline  icon"></i>踩一下</a>
						</span>
						[<span th:text="${dislike}">2</span>]
						</div>
					</div>
					</div>

				<div class="ui attached positive message" th:if="${blog.sharestatement}">
					<!--博客信息-->
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<ul class="list">
								<li>作者：<span th:text="${blog.user.nickname}"></span>Victory_林</li>
                                <li>发表时间:<span th:text="${#dates.format(blog.updatetime,'yyyy-MM-dd')}"></span></li>
                                <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                                <li>公众号转载：请在文末添加作者公众号二维码</li>
							</ul>
						</div>
						<div class="five wide column">
							<img src="static/img/wechat.jpg" th:src="@{/img/wechat.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 120px;"/>
						</div>
					</div>
				</div>
				<div class="ui bottom attached segment">
					<!--留言区域-->
					<div id="comment-container" class="ui teal segment" th:if="${blog.commentabled}">
                        <div th:fragment="commentList">
                            <div class="ui threaded comments" style="max-width: 100%;" >
                                <h3 class="ui dividing header">评论</h3>
                                <div class="comment" th:each="comment : ${comments}">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/1/100/100?image=129" th:src="@{${comment.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
											<span th:text="${comment.nickname}"></span>
											<div class="ui mini basic teal leaf pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
										</a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd')}">今天下午 5:42</span>
                                        </div>
                                        <div class="text" th:text="${comment.content}">太赞了！ </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt"
											   th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"    onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                    <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                        <div class="comment" th:each="reply : ${comment.replyComments}">
                                            <a class="avatar">
                                                <img src="https://picsum.photos/id/1/100/100?image=129" th:src="@{${reply.avatar}}">
                                            </a>
                                            <div class="content">
                                                <a class="author" >
                                                    <span th:text="${reply.nickname}"></span>
													<!--th:text="${reply.comment.nickname}"-->
                                                    <div class="ui mini basic teal leaf pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>
													&nbsp;<span th:text="|@ ${comment.nickname}|" class="m-teal">@ 小白</span>
                                                </a>
                                                <div class="metadata">
                                                    <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd')}">今天下午 5:42</span>
                                                </div>
                                                <div class="text" th:text="${reply.content}">太赞了！ </div>
                                                <div class="actions">
                                                    <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                                       th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}"    onclick="reply(this)">回复</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
							<div class="ui  container">
								<div class="ui warning message" th:if="${message != null}">
									<div class="header">提示:</div>
									<p th:text="${message}">恭喜，操作成功</p>
								</div>
							</div>
						</div>
		</div>
			<div id="comment-form" class="ui form" th:if="${blog.commentabled}">
				<input type="hidden" name="blog.id" th:value="${blog.id}">
				<input type="hidden" name="parentComment.id" value="-1">
			   <div class="field">
			   		<textarea name="content" placeholder="请输入评论信息...."></textarea>
			   </div>
			   <div class="fields">
			   	<div class="field m-mobile-wide m-margin-bottom-small">
			   		<div class="ui left icon input">
			   			<i class="user icon"></i>
			   		<input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}  : '匿名游客'"/>
			   		</div>
			   	</div>
			   	<div class="field m-mobile-wide m-margin-bottom-small">
			   		<div class="ui left icon input">
			   			<i class="mail icon"></i>
			   		<input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}"/>
			   		</div>
			   	</div>
			   	<div class="field m-mobile-wide m-margin-bottom-small">
			   		<button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
			   	</div>
			   </div>
			</div>

		</div>
	</div>
 </div>
 <div id="toolbar" class="m-fixed m-right-buttom m-padded" style="display: none;">
  <div class="ui vertical icon buttons">
 	<button type="button" class="ui toc teal button">目录</button>
 	<a href="#comment-container" type="button" class="ui teal button">评论</a>
 	<button class="ui wechat icon button"><i  class="weixin icon"></i></button>
 	<div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
  </div>
 </div>

	 <div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
		<ol class="js-toc">

		</ol>
	 </div>
	 <div id="qrcode" class="ui wechat-qr flowing popup transition hidden" style="width: 130px !important;">
	   <!--<img src="static/img/wechat.jpg"class="ui rounded image" style="width: 120px !important" />-->
	 </div>
			</div>
 </br>
 </br>

		<!--&lt;!&ndash;底部footer&ndash;&gt;
	    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
	    	<div class="ui center aligned container">
	    		<div class="ui inverted divided stackable grid">
	    			<div class="three wide column">
	    				<div class="ui inverted link list">
	    					<img src="static/img/wechat.jpg" class="ui rounded image" alt="" style="width:110px"/>
	    				</div>
	    			</div>
	    			<div class="three wide column">
	    				<h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
	    				<div class="ui inverted link list">
	    					<a href="#" class="item">用户故事(User Story)</a>
	    					<a href="#" class="item">用户故事(User Story)</a>
	    					<a href="#" class="item">用户故事(User Story)</a>
	    				</div>
	    			</div>
	    			<div class="three wide column">
	    				<h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
	    				<div class="ui inverted link list">
	    					<a href="#" class="item">Email:1027716017@QQ.com</a>
	    					<a href="#" class="item">QQ:1027716017</a>
	    				</div>
	    			</div>
	    			<div class="seven wide column">
	    				<h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
	    				<p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、写作、思考相关的任何内容，希望可以给来这的人有所帮助</p>
	    			</div>
	    		</div>
	    		<div class="ui inverted section divider"><br/><br/>
	    			<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2019 Blog Designed by LQ</p>
	    		</div>
	    	</div>

	    </footer>-->


        <!--/*/<th:block th:replace="_fragments :: script">/*/-->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
        <script src="../static/lib/prism/prism.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
        <script src="../static/lib/tocbot/tocbot.min.js"></script>
        <script src="../static/lib/qrcode/qrcode.min.js"></script>
        <script src="../static/lib/waypoint/jquery.waypoints.min.js"></script>
        <!--/*/</th:block>/*/-->

		<script th:inline="javascript">
            $('.message .close')
                .on('click', function() {
                    $(this)
                        .closest('.message')
                        .transition('fade')
                    ;
                })
            ;
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
			 $('#payButton').popup({
             popup : $('.payQR.popup'),
             on : 'click',
             position: 'bottom center'
    		});
            tocbot.init({
                // Where to render the table of contents.
                tocSelector: '.js-toc',
                // Where to grab the headings to build the table of contents.
                contentSelector: '.js-toc-content',
                // Which headings to grab inside of the contentSelector element.
                headingSelector: 'h1, h2, h3',
            });
    		$('.toc.button').popup({
    			popup : $('.toc-container.popup'),
                on : 'click',
                position: 'left center'
    		});
    		$('.wechat').popup({
             popup : $('.wechat-qr'),
             on : 'hover',
             position: 'left center'
  		  });
  		  var qrcode = new QRCode("qrcode", {
		    text: "127.0.0.1:8887",
		    width: 110,
		    height: 110,
		    colorDark : "#000000",
		    colorLight : "#ffffff",
		    correctLevel : QRCode.CorrectLevel.H
		});
		$('#toTop-button').click(function(){
			$(window).scrollTo(0,500);
		});
		var waypoint = new Waypoint({
		  element: document.getElementById('waypoint'),
		  handler: function(direction) {
		  	if(direction == 'down'){
		  		$('#toolbar').show(100);
		  	}else{
		  		$('#toolbar').hide(500);
		  	}
	      console.log('Scrolled to waypoint!'+direction)
	     }
		});
            $('.ui.form').form({
                fields: {
                    content: {
                        identifier: 'content',
                        rules: [{
                            type: 'empty',
                            prompt: '标题:请输入评论内容'
                        }]
                    },
                    email: {
                        identifier: 'email',
                        rules: [{
                            type: 'email',
                            prompt: '标题:请输入邮箱地址'
                        }]

                    },
                    nickname : {
                        identifier: 'nickname',
                        rules: [{
                            type : 'empty',
                            prompt: '标题：请输入你的大名'
                        }]
                    }
                }
            });
            $(function () {
                $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6");
            });
            $('#commentpost-btn').click(function () {
                var boo =  $('.ui.form').form('validate form');
                if (boo){
                    console.log("校验成功");
                    postData();
                } else {
                    console.log("校验失败");
                }
            });
            
            function postData() {
                $("#comment-container").load(/*[[@{/comments}]]*/"",{
                    "parentComment.id" : $("[name='parentComment.id']").val(),
                    "blog.id" : $("[name='blog.id']").val(),
                    "nickname": $("[name='nickname']").val(),
                    "email"   : $("[name='email']").val(),
                    "content" : $("[name='content']").val()
                },function (responseTxt, statusTxt, xhr) {
      //        $(window).scrollTo($('#comment-container'),500);
                    clearContent();
                });
            }
            function clearContent() {
                $("[name='content']").val('');
                $("[name='parentComment.id']").val(-1);
                $("[name='content']").attr("placeholder", "请输入评论信息...");
            }

            function reply(obj) {
              var commentId = $(obj).data('commentid');
              var commentNickname = $(obj).data('commentnickname');
                $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
                $("[name='parentComment.id']").val(commentId);
                $(window).scrollTo($('#comment-form'),500);
            }
		</script>
	</body>
</html>
